<template>
    <div class="index-container">
        <div class="layout">
            <Layout>
                <!-- 导航栏菜单区域 -->
                <Header>
                    <Menu mode="horizontal" theme="dark" active-name="1">
                        <div class="layout-logo">
                            <router-link to="/"><img src="../../assets/imgs/logo.png" alt=""></router-link>
                        </div>
                        <!-- 大窗口导航栏菜单 -->
                        <div class="layout-nav">
                            <MenuItem name="1" to="/">
                                <Icon type="ios-home" />
                                首页
                                <!-- eslint-disable-next-line vue/no-parsing-error -->
                            </MenuItem>
                            <MenuItem name="2" to="/goodsList">
                                <Icon type="ios-basket" />
                                商城
                                <!-- eslint-disable-next-line vue/no-parsing-error -->
                            </MenuItem>
                            <MenuItem name="3" to="/wantGoodsList">
                                <Icon type="md-basket" />
                                求购商城
                                <!-- eslint-disable-next-line vue/no-parsing-error -->
                            </MenuItem>
                            <Submenu name="4">
                                <template slot="title">
                                    <Icon type="ios-send" />
                                    去发布
                                </template>
                                <MenuItem name="4-1" to="/addGoods">
                                <!-- eslint-disable-next-line vue/no-parsing-error -->
                                    发布商品</MenuItem>
                                <MenuItem name="4-2" to="/addWantGoods">
                                <!-- eslint-disable-next-line vue/no-parsing-error -->
                                    发布求购</MenuItem>
                             </Submenu>
                            <MenuItem name="5" to="/login" v-if="user===null">
                                <Icon type="md-log-in" />
                                去登录
                                <!-- eslint-disable-next-line vue/no-parsing-error -->
                            </MenuItem>
                            <Submenu name="5" v-if="user">
                                <template slot="title">
                                    {{user.uName}}
                                </template>
                                <MenuItem name="3-1" to="/userHome">
                                    <Icon type="md-contact" />
                                <!-- eslint-disable-next-line vue/no-parsing-error -->
                                        个人中心</MenuItem>
                                <MenuItem name="3-2" to="/shopCar">
                                    <Icon type="ios-cart" />
                                <!-- eslint-disable-next-line vue/no-parsing-error -->
                                        购物车</MenuItem>
                                <MenuItem name="3-3" to="">
                                    <span @click="logOut"><Icon type="md-exit" />
                                        退出</span>
                                <!-- eslint-disable-next-line vue/no-parsing-error -->
                                </MenuItem>
                            </Submenu>
                        </div>
                        <div class="layout-btn">
                            <MenuItem name="6">
                                <Icon type="ios-keypad" :style="{'font-size': '20px'}" @click="toggleMenu"></Icon>
                            <!-- eslint-disable-next-line vue/no-parsing-error -->
                            </MenuItem>
                        </div>
                    </Menu>
                </Header>
                <!-- 小窗口导航栏菜单 -->
                <div class="layout-all">
                    <ul>
                        <li><router-link to="/">
                            <Icon type="ios-home" />
                                首页</router-link>
                        </li>
                        <li><router-link to="/goodsList">
                            <Icon type="ios-basket" />
                                商城</router-link>
                        </li>
                        <li><router-link to="/wantGoodsList">
                                <Icon type="md-basket" />
                                求购商城</router-link>
                        </li>
                        <li><router-link to="/addGoods">
                            <Icon type="ios-send" />去发布
                            <Icon type="ios-arrow-down"></Icon></router-link>
                            <ul>
                                <li><router-link to="/addGoods">
                                    发布商品</router-link>
                                </li>
                                <li><router-link to="/addWantGoods">
                                    发布求购</router-link>
                                </li>
                            </ul>
                        </li>
                        <li><router-link to="/login" v-if="user===null">
                                <Icon type="md-log-in" />
                                去登录</router-link>
                        </li>
                        <li v-if="user"><router-link to="/">{{user.uName}}
                            <Icon type="ios-arrow-down"></Icon></router-link>
                            <ul>
                                <li><router-link to="/userHome">
                                        <Icon type="md-contact" />
                                        个人中心</router-link>
                                </li>
                                <li><router-link to="/shopCar">
                                        <Icon type="ios-cart" />
                                        购物车</router-link>
                                </li>
                                <li><router-link to="">
                                    <span @click="logOut"><Icon type="md-exit" />
                                        退出</span>
                                    </router-link>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <Content :style="{padding: '40px 50px'}">
                    <!-- 搜索框 -->
                    <!-- <div class="search-bar">
                        <input type="text" placeholder="search...">
                    </div> -->
                </Content>
            </Layout>
            <!-- 中间内容的路由区域 -->
            <router-view></router-view>
            <!-- 返回顶部 -->
            <BackTop></BackTop>
            <!-- 底部footer区域 -->
            <div class="footer">
                <span>Copyright © 2020 闲贰 All Rights Reserved</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
    //   logo: import('../../assets/imgs/logo.png'),
      user: JSON.parse(localStorage.getItem('user')) || null
    }
  },
  mounted () {
    this.monitor()
  },
  methods: {
    showAndHidden () {
      let w = document.documentElement.clientWidth || document.body.clientWidth
      const nav = document.querySelector('.layout-nav')
      const btn = document.querySelector('.layout-btn')
      if (w < 800) {
        nav.style.display = 'none'
        btn.style.display = 'block'
        btn.classList.add('animated', 'zoomIn')
      } else {
        nav.style.display = 'block'
        btn.style.display = 'none'
        nav.classList.add('animated', 'zoomIn')
      }
      document.querySelector('.layout-all').style.display = 'none'
    },
    // 监听导航栏菜单
    monitor () {
      // 一是监听页面加载时窗口的大小，根据窗口大小判断显示的样式
      this.showAndHidden()
      // 二是页面拖拽时监听窗口的大小，根据窗口大小判断显示的样式
      window.onresize = () => {
        this.showAndHidden()
      }
    },
    // 可视窗口缩小时的导航栏菜单显示与隐藏
    toggleMenu () {
      const all = document.querySelector('.layout-all')
      if (all.style.display === 'none') {
        all.style.display = 'block'
        all.classList.add('animated', 'fadeInUp')
      } else {
        all.style.display = 'none'
        all.style.transition = 'display .3s ease-in-out'
      }
    },
    // 退出登录
    logOut () {
      localStorage.removeItem('user')
      localStorage.removeItem('token')
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
.index-container{
    width: 100%;
    height: auto;
}
.layout-logo{
    background: none !important;
}
.layout-logo>a{
    display: block;
    width: 100px;
    height: 40px;
}
.layout-logo>a img{
    vertical-align: top;
}
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.layout-logo{
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}
.layout-nav{
    width: 560px;
    margin: 0 auto;
    margin-right: 20px;
}
.layout-footer-center{
    text-align: center;
}
.ivu-dropdown-rel>a{
    color: rgba(255,255,255,.7);
}
.ivu-dropdown-rel a:hover{
    color:#fff;
    text-decoration: none;
}
.layout-btn{
    width: 20px;
    margin: 0 auto;
    margin-right: 20px;
    font-size: 20px;
}
.layout-all{
    width: 100%;
    height: auto;
    background: #fff;
    display: none;
    position: absolute;
    top: 64px;
    left:0;
    z-index: 9999;
   box-shadow: 0px 4px 2px #eeeeee;
}
.layout-all ul{
    margin-bottom: 0;
    padding: 5px 0;
}
.layout-all ul li a{
    display: block;
    padding: 8px 10px;
    color: #515a6e;
    transition: background .3s ease-in-out;
}
.layout-all ul li a:hover {
    background: #f3f3f3;
    text-decoration: none;
}
.layout-all ul li ul {
    display: none;
}
.layout-all ul li ul li a{
    display: block;
    padding: 8px 15px;
    color: #515a6e;
    transition: background .3s ease-in-out;
}
.layout-all ul li ul li a:hover {
    background: #f3f3f3;
    text-decoration: none;
}
.layout-all ul li:hover ul{
    display: block;
}
.search-bar{
    width: 350px;
    height: 40px;
    padding: 0 20px;
    background-color: #fff;
    border-radius: 40px;
    margin:0 auto;
    z-index: 5;
    margin-top: 20px;
    margin-bottom: 20px;
}
.search-bar input{
    outline: 0;
    color:#515250;
    border: none;
    height: 40px;
    line-height: 40px;
    width: 100%;
    box-shadow: none;
    background-color: transparent;
}
.footer{
    margin-top: 1rem;
    width: 100%;
    height: 3rem;
    background-color: #515a6e;
    color:#fff;
    line-height: 3rem;
    font-size: 0.9rem;
    text-align: center;
}
</style>
